<template>
	<view class="main userInfo-main">
		<NavigationBar title="个人资料" />
		<view class="scroll-wrap">
			<view class="cell-wrap">
				<view class="cell-item b-b">
					<view class="left">头像</view>
					<view class="right">
						<FilePicker 
						:value="userInfo"
						:image-styles="imageStyles"
						:limit="1"
						:del-icon="false" 
						disable-preview
						@success="uploadSuccess"
						class="avatar"
						></FilePicker>
					</view>
				</view>
				<view class="cell-item b-b">
					<view class="left">昵称</view>
					<view class="right">
						<input class="uni-input" :value="userInfo.nickName" @input="nickNameChaangeAction"  placeholder-class="placeholder" placeholder="请输入昵称" />
					</view>
				</view>
				<view class="cell-item b-b">
					<view class="left">性别</view>
					<view class="right">
						<radio-group class="radio-group" @change="genderChangeAction">
							<label class="radio">
								<radio value="1" color="#f2270c" :checked="userInfo.gender==1"/>
								<text class="radio-text">男</text>
							</label>
							<label class="radio">
								<radio value="0" color="#f2270c" :checked="userInfo.gender==0"/>
								<text class="radio-text">女</text>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="cell-item b-b">
					<view class="left">地区</view>
					<view class="right">
						{{userInfo.province}}{{userInfo.city}}
					</view>
				</view>
			</view>
			<view class="submit-btn-wrap">
				<view class="submit-btn flex-center" @click="submitAction">
					<text class="btn-text">保存资料</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import FilePicker from '@/components/uni-file-picker/uni-file-picker.vue'; 
	import { mapState,mapMutations } from 'vuex';
	export default {
		data() {
			return {
				imageStyles: {
					"height": 60,   // 边框高度
					"width": 60,    // 边框宽度
					"border":{ // 如果为 Boolean 值，可以控制边框显示与否
						"color":"#eee",     // 边框颜色
						"width":"1px",      // 边框宽度
						"style":"solid",    // 边框样式
						"radius":"50%"      // 边框圆角，支持百分比
					}
				},
				updateInfo: {}
			};
		},
		computed: {
			...mapState({
				userInfo(state: any) {
				    let info = state.login.userInfo
				    info.path = info.avatarUrl
				    info.url = info.avatarUrl
				    return info
				}
			})
		},
		onLoad() {
			const _this:any = this
			console.log(_this.updateInfo)
		},
		methods: {
			/**
			 * 修改头像
			 */
			uploadSuccess(e: any){
				const _this:any = this
				let url = e.tempFilePaths[0]
				_this.updateInfo.url = url
				_this.updateInfo.path = url
				_this.updateInfo.avatarUrl = url
			},
			/**
			 * 修改昵称
			 */
			nickNameChaangeAction (e: any) {
				const _this:any = this
				_this.updateInfo.nickName = e.target.value
			},
			/**
			 * 修改性别
			 */
			genderChangeAction(e: any) {
				const _this:any = this
				let gender = e.target.value
				_this.updateInfo.gender = Number(gender)
			},
			submitAction() {
				const _this:any = this
				_this.setUserInfo(_this.updateInfo)
				_this.$util.goBack()
			},
			...mapMutations(['setUserInfo'])
		},
		components: {
			FilePicker
		}
	}
</script>

<style lang="scss">
	@import "./userInfo.scss";  
</style>
